<template>
  <div>
    <!-- 
      v-on: 
      作用：绑定事件
      语法：
      v-on:事件名="执行的少量代码"
      v-on:事件名="methods中的函数名"
      v-on:事件名="methods中的函数名(实参)"

    注意：
    methods: 是vue提供给开发者声明函数的对象
     -->
    <h1>你要买的商品数量：{{ count }}</h1>
    <button v-on:click="count = count + 1">增加1</button>
    <button v-on:click="addFn">增加1个</button>
    <button v-on:click="addCountFn(5)">增加5个</button>

    <!-- /*** v-on: 简写 @ 语法：@事件名="methods中的函数名" */ -->
    <button @click="subFn">把count的数量减少</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 1,
    };
  },
  methods: {
    addFn() {
      // this指向export default的对象(vue组件实例化对象)
      this.count = this.count + 1;
      console.log(this);
    },
    addCountFn(num) {
      this.count = this.count + num;
    },
    subFn() {
      this.count = this.count - 1;
    },
  },
};
</script>

<style>
</style>